<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基本资料</span>
                        </div>
                    </template>
                    <div class="left-top">
                        <div class="top">
                            <img style="width: 50px;height: 50px;border-radius: 50%;"
                                :src="userData.profilePhoto ? userData.profilePhoto : '../../../../public/img/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=JPEG.webp'"
                                alt="">
                            <p >{{ userData.userName }}</p>
                        </div>
                        <div class="top">
                            <p>订单数量</p>
                            <p class="topDiv">12312312.00</p>
                        </div>
                        <div class="top">
                            <p>积分</p>
                            <p class="topDiv">{{ userData.integral }} <span style="color: #409eff;cursor: pointer;font-size: 14px;"
                                    @click="rechargeData('积分')">充值</span>
                            </p>
                        </div>
                        <div class="top">
                            <p>会员成长值</p>
                            <p class="topDiv">{{ userData.integration }}
                            </p>
                        </div>
                    </div>
                    <div style="padding-left: 50px;">
                        <p>手机号码： {{ userData.phone }}</p>
                        <p>注册时间： {{ userData.createTime }}</p>
                        <p>是否为黑名单： {{ userData.blacklist == 0 ? '是' : '否' }}</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>收获地址</span>
                        </div>
                    </template>
                    <div>
                        <el-table :data="tableData" style="width: 100%" border max-height="300px">
                            <el-table-column prop="name" label="收货人" />
                            <el-table-column prop="phone" label="联系方式" />
                            <el-table-column prop="address" label="地址" />
                            <el-table-column prop="defaultAddress" label="是否默认">
                                <template #default="scope">
                                    {{ scope.row.defaultAddress == 0 ? '否' : '是' }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <el-dialog v-model="recharge" :title="title" width="400px" :before-close="handleClose" center>
        <div>
            <el-form :model="formpage">
                <el-form-item label="数量">
                    <el-input v-model="formpage.payMoney" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="saveData">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue'
import { rechargePointsBalance, getData, getAddress } from '@/api/userManagement.js'
import { ElMessage } from 'element-plus'
const props = defineProps({
    rowData: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['OKdata'])
const recharge = ref(false)
const title = ref('')
const formpage = reactive({
    payMoney: 0,
})
const rechargeDataNum = ref(-1)
const userData = ref({})

const tableData = reactive([])
// 关闭弹框
const handleClose = () => {
    recharge.value = false
}
// 点击充值
const rechargeData = (num) => {
    recharge.value = true
    rechargeDataNum.value = num
    if (num == '积分') {
        title.value = '积分调整'
    } else {
        title.value = '余额调整'
    }
}
// 保存
const saveData = () => {
    let par = {
        ...formpage,
        loginId: JSON.parse(localStorage.getItem('userInfo')).data.id,
        userId: userData.value.id,
        type: rechargeDataNum.value
    }
    rechargePointsBalance(par).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: res.msg,
                type: 'success'
            });
            getUserData()
            recharge.value = false
        }
    })
}
// 获取数据
const getUserData = () => {
    getData(props.rowData.id).then(res => {
        if (res.code == 200) {
            userData.value = res.data[0]
        }
    })
}
const getAddressData = () => {
    tableData.length = 0
    getAddress(props.rowData.id).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data)
        }
    })
}

onMounted(() => {
    if (props.rowData) {
        getUserData()
        getAddressData()
    }
})
</script>

<style lang="scss" scoped>
.left-top {
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .topDiv{
        font-size: 24px;
        color: #303133;
        font-weight: 500;

    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
}
</style>